<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>
    <!--<link rel="stylesheet" href="../../resources/lib/metroui/css/metro-bootstrap.min.css"-->
          <!--th:href="@{/resources/lib/metroui/css/metro-bootstrap.min.css}" />-->

    <script type="text/javascript" src="../../resources/lib/metroui/jquery/jquery.min.js"
            th:src="@{/resources/lib/metroui/jquery/jquery.min.js}"></script>
    <!--<script type="text/javascript" src="../../resources/lib/metroui/jquery/jquery.widget.min.js"-->
            <!--th:src="@{/resources/lib/metroui/jquery/jquery.widget.min.js}"></script>-->
    <!--<script type="text/javascript" src="../../resources/lib/metroui/metro.min.js" th:src="@{/resources/lib/metroui/metro.min.js}"></script>-->

    <!--<script src="../../../resources/map/js/websocket.js" th:src="@{/resources/map/js/websocket.js}"></script>-->
    <style type="text/css">
        html, body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        body {
            background-color: #080808;
            -moz-user-select:none;
            -webkit-user-select:none;
        }
        .item_male {
            border: 1px solid #CCCCCC;
            background-color: #0067b0;
            float: left;
            margin-left: 5px;
        }
        .item_female {
            border: 1px solid #CCCCCC;
            background-color: #aa00ff;
            float: left;
            margin-left: 5px;
        }
        #main {
            position: absolute;
            top: 5px;
            left: 0px;
            right: -50000px;
            bottom: 5px;
            margin: 0px;
            overflow: hidden;
        }
        .tool_bar {
            position: absolute;
            /*top: 10px;*/
            left: 10px;
            bottom: 10px;
            z-index: 10000;
            opacity: 0.5;
        }

        .tool_bar:hover {
            opacity: 0.9;
        }

        .directionNav {
            position: fixed;
            left: 0;
            right: 0;
            top: 45%;
        }

        .directionNav a {
            position:absolute;
            top:45%;
            z-index:9;
            cursor:pointer;
        }
        .main .directionNav a {
            display:block;
            width:30px;
            height:30px;
            background:url(arrows.png) no-repeat;
            text-indent:-9999px;
            border:0;
            opacity: 0;
            -webkit-transition: all 200ms ease-in-out;
            -moz-transition: all 200ms ease-in-out;
            -o-transition: all 200ms ease-in-out;
            transition: all 200ms ease-in-out;
        }
        .main:hover .directionNav a { opacity: 1; }
        a.nextNav {
            right:15px;
        }
        a.prevNav {
            left:15px;
        }
    </style>
</head>

<body onselect="return false;">
<div id="main" class="main">
    <div class="directionNav">
        <a class="prevNav">Prev</a>
        <a class="nextNav" style="background-position: -30px 0">Next</a>
    </div>
    <div class="item_male">
        <img src="../../resources/images/theme_blue.jpg">
    </div>
    <div class="item_male">
        <img src="../../resources/images/theme_green.jpg">
    </div>
    <div class="item_male">
        <img src="../../resources/images/theme_blue.jpg">
    </div>
    <!--<div id="s2" class="slide">-->
        <!--<img src="../../resources/images/theme_green.jpg">-->
    <!--</div>-->
    <!--<br style="clear: both;" />-->
</div>
<div class="tool_bar" style="">
    <button id="add">add</button>
    <button id="close">关闭</button>
</div>

<script th:inline="javascript" type="text/javascript">
    function toggleFullScreen() {
        if (!document.fullscreenElement &&    // alternative standard method
                !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {  // current working methods
            if (document.documentElement.requestFullscreen) {
                document.documentElement.requestFullscreen();
            } else if (document.documentElement.msRequestFullscreen) {
                document.documentElement.msRequestFullscreen();
            } else if (document.documentElement.mozRequestFullScreen) {
                document.documentElement.mozRequestFullScreen();
            } else if (document.documentElement.webkitRequestFullscreen) {
                document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
            }
        } else {
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.webkitExitFullscreen) {
                document.webkitExitFullscreen();
            }
        }
    }
    // 禁用触摸移到的默认行为
    document.body.addEventListener('touchmove', function(event) {
        event.preventDefault();
    }, false);
    $(function ($) {
        var BASE_URL = /*[[@{/}]]*/ '/';
//        $('.carousel').carousel({
//            auto: false,
//            period: 3000,
//            duration: 2000,
//            markers: {
//                type: "square"
//            }
//        });

        var lastX;

        $('#main').bind('mousedown', function(event) {
            lastX = event.pageX;
            console.log(lastX);
        });
        $('#main').bind('mouseup', function(event) {
            var offset = event.pageX - lastX;
            if (offset > 10) {
                moveRight();
            } else if (offset < -10) {
                moveLeft();
            }
        });
        $('#main').bind('touchstart', function(event) {
            // If there's exactly one finger inside this element
            if (event.targetTouches.length == 1) {
                var touch = event.targetTouches[0];
                lastX = touch.pageX;
            }
        });
        $('#main').bind('touchend', function(event) {
            // If there's exactly one finger inside this element
            if (event.targetTouches.length == 1) {
                var touch = event.targetTouches[0];
                // Place element where the finger is
                var offset = touch.pageX - lastX;
                if (offset > 10) {
                    moveRight();
                } else if (offset < -10) {
                    moveLeft();
                }
            }
        }, false);

        var width = window.screen.width;
        var height = window.screen.height;
        var itemWidth = (width - 15) / 2 - 2;
        var itemHeight = height - 12;
        console.log(itemWidth);
        $("div.item_male").width(itemWidth).height(itemHeight);
        var index = 0;
        var count = 3;
        function showOrHideNav() {
            if ((index < 0 && index - 2 == -count)) {
                $('.nextNav').hide();
            } else {
                $('.nextNav').show();
            }
            if (index == 0) {
                $('.prevNav').hide();
            } else {
                $('.prevNav').show();
            }
        }
        function moveLeft() {
            if ((index < 0 && index - 2 == -count)) {
                return;
            }
            index--;
            var v = index * (itemWidth + 7);
            $("#main").animate({"left": v + "px"});
            showOrHideNav();
        }
        function moveRight() {
            if (index == 0) {
                return;
            }
            index++;
            var v = index * (itemWidth + 7);
            $("#main").animate({"left": v + "px"});

            showOrHideNav();
        }

        $('.prevNav').click(moveRight);
        $('.nextNav').click(moveLeft);
        $('#add').click(function(){
            //toggleFullScreen();
            if (count % 2 == 0) {
                $('<div class="item_male"> <img src="../../resources/images/theme_blue.jpg"> </div>')
                        .width(itemWidth).height(itemHeight).appendTo($('#main'));
            } else {
                $('<div class="item_female"> <img src="../../resources/images/theme_green.jpg"> </div>')
                        .width(itemWidth).height(itemHeight).appendTo($('#main'));
            }
            count++;
            moveLeft();
        });
        $('#close').click(function(){
            if (hex) {
                hex.close();
            }
        });
    });
</script>
</body>
</html>
